<template>
  <div :class="$style.setTopWrap">
    <p :class="$style.textRate">12%</p>
    <h2 :class="$style.titleH2">历史年化收益率</h2>
    <div class="flexWrap">
      <div class="flexItemC2">
        <p :class="$style.textData">12个月</p>
        <h3 :class="$style.titleH3">出借期限</h3>
      </div>
      <div class="flexItemC2">
        <p :class="$style.textData">45896.00</p>
        <h3 :class="$style.titleH3">借款总额(元)</h3>
      </div>
      <div class="flexItemC2">
        <p :class="$style.textData">等额本息</p>
        <h3 :class="$style.titleH3">还款方式</h3>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'investDetailXtb'
  }
</script>

<style lang="scss" module>
  .setTopWrap {
    text-align: center;
    padding: 130px 0 50px;
    background: url(@/assets/img/part/investDetailXtb/setTopBg.png) no-repeat top center;
    background-size: 100% 100%;
  }

  .textRate {
    color: #ffffff;
    font-size: 120px;
  }

  .titleH2 {
    margin: 20px 0 140px;
    font-size: 36px;
    color: rgba(255, 255, 255, 0.502);
  }

  .textData {
    color: #ffffff;
    font-size: 42px;
  }

  .titleH3 {
    margin-top: 20px;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.502);
  }
</style>
